<template>
  <div class="dashboard-editor-container">

    <panel-group @handleSetLineChartData="handleSetLineChartData" />

    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row> -->

    <el-row :gutter="10" style="padding-bottom:20px">
      <el-col :span="6" v-for="(item, index) in hard1" :key="item.id" >
        <el-card :body-style="{ padding: '10px' }" shadow="hover" >
          <div style="padding: 10px;"  @click="detail(item)">
            <el-row :gutter="2"  type="flex" >
             
              <el-col :span="14">
                <p><span >材料名称：</span> <span>{{item.matName || ' '}}</span> </p>
                <p><span>抗压强度：</span>  <span>{{item.ky || ' '}}</span>  </p>
                <p><span>抗拉强度：</span> <span>{{item.kl || ' '}}</span> </p>
                <p><span>抗弯强度：</span> <span>{{item.kw || ' '}}</span> </p>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="6" v-for="(item, index) in hard2" :key="item.id" >
        <el-card :body-style="{ padding: '10px' }" shadow="hover" >
          <div style="padding: 10px;" @click="detail(item)">
            <el-row :gutter="2"  type="flex" >
             
              <el-col :span="14">
                <p><span >材料名称：</span> <span>{{item.matName || '  '}}</span> </p>
                <p><span>抗压强度：</span>  <span>{{item.ky || ' '}}</span>  </p>
                <p><span>抗拉强度：</span> <span>{{item.kl || ' '}}</span> </p>
                <p><span>抗弯强度：</span> <span>{{item.kw || ' '}}</span> </p>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="材料数据" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form"  label-width="80px" :disabled="true" >
        <el-form-item label="材料名称" prop="matName">
          <el-input  v-model="form.matName" placeholder="请输入材料名称" />
        </el-form-item>
        <!-- <el-form-item label="材料编号" prop="matNo">
          <el-input v-model="form.matNo" placeholder="请输入材料编号" />
        </el-form-item> -->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
         <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
              v-for="dict in dict.type.status"
              :key="dict.value"
              :label="parseInt(dict.value)"
            >{{dict.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
        </el-form-item> -->
        <el-divider content-position="center">材料属性信息</el-divider>
        
        <el-table width="1200px" border
          :data="form.mmMaterialPropertiesList" 
          :span-method="objectSpanMethod"
          :row-class-name="rowMmMaterialPropertiesIndex" 
          @selection-change="handleMmMaterialPropertiesSelectionChange" 
          ref="mmMaterialProperties"
          class="aa">
          <el-table-column type="selection" width="50px" align="center" />
          <el-table-column label="属性类型" prop="propertyTypeLabel" width="250" />
          <el-table-column label="序号" align="center" prop="index" width="100"/>  
          <el-table-column label="属性名称" prop="propertyName" width="250" >
            <template slot-scope="scope">
              <el-form-item :prop="'mmMaterialPropertiesList.' + scope.$index + '.propertyName'"  >
                <el-input v-model="scope.row.propertyName" placeholder="请输入属性名称" />
              </el-form-item>
            </template>
          </el-table-column>
          <!-- <el-table-column label="状态" prop="status" width="150">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" placeholder="请选择状态">
                <el-option label="请选择字典生成" value="" />
              </el-select>
            </template>
          </el-table-column> -->
          <el-table-column label="属性测试方法" prop="propertyTestMethod" width="250">
            <template slot-scope="scope">
              <el-select v-model="scope.row.propertyTestMethod" filterable placeholder="请输入属性测试方法" >
                <el-option
                  v-for="dict in dict.type.material_test_method"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="属性值" prop="propertyValue" width="250">
            <template slot-scope="scope">
              <el-form-item :prop="'mmMaterialPropertiesList.' + scope.$index + '.propertyValue'"  >
                <el-input v-model="scope.row.propertyValue" placeholder="请输入属性值" />
                </el-form-item>
            </template>
          </el-table-column>

        </el-table>
      </el-form>
      
    </el-dialog>
    
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import im from '@/components/ImagePreview'
import { newMaterialList} from "@/api/hustmm/statistics"
import { listMmMaterial, getMmMaterial, delMmMaterial, addMmMaterial, updateMmMaterial } from "@/api/hustmm/MmMaterial";


const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    im
  },
  dicts: ['property_type', 'material_test_method', 'status','user'],
  computed: {
    realSrc() {
      if (!this.src) {
        return;
      }
      let real_src = this.src.split(",")[0];
      if (isExternal(real_src)) {
        return real_src;
      }
      return process.env.VUE_APP_BASE_API + real_src;
    },
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      currentDate: new Date(),
      hard1:[],
      hard2:[],
      form:{},
      open: false,
      dictMap:{},
      spanArr:[]
    }
  },
  created(){
    newMaterialList().then(res => {
      
      let b = 8-res.rows.length
      for(let i in res.rows){
        if(i>7){
          break
        }
        // console.log(i)
        let valueObj = res.rows[i]
        let obj = {
          matName:valueObj.matName,
          matId:valueObj.matId
        }
        valueObj.properties.split(',').forEach((element,index) => {
          if(element=='抗拉强度'){
            obj.kl = valueObj.values.split(',')[index]
          }
          if(element=='抗压强度'){
            obj.ky = valueObj.values.split(',')[index]
          }
          if(element=='抗弯强度'){
            obj.kw = valueObj.values.split(',')[index]
          }
        });
        if(!obj.kl){
          obj.kl='NaN'
        }
        if(!obj.ky){
          obj.ky='NaN'
        }
        if(!obj.kw){
          obj.kw='NaN'
        }
        if(i<4){
           this.hard1 = this.hard1.concat(obj)
        }else{
          this.hard2 = this.hard2.concat(obj)
        }
      }
      this.makeDictMap();
    });
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    makeDictMap(){
      let dict = this.dict.type.property_type
      dict.forEach((i,index)=>{
        this.dictMap[i.value]=i
      })
    },
    detail(item){
      this.active = 1
      this.reset();
      const matId = item.matId
      getMmMaterial(matId).then(response => {
        this.form = response.data;
        this.mmMaterialPropertiesList = response.data.mmMaterialPropertiesList;
        this.mmMaterialPropertiesList.forEach((i,index)=>{
          // console.log(i,this.dictMap[i.propertyType].label)
          i.propertyTypeLabel = this.dictMap[i.propertyType].label
        })
        this.open = true;
        this.title = "修改材料数据";
        this.rowSpanDataProcess()
      });
    },
    rowMmMaterialPropertiesIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
        /** 复选框选中数据 */
    handleMmMaterialPropertiesSelectionChange(selection) {
      this.checkedMmMaterialProperties = selection.map(item => item.index)
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) { 
      // console.log(rowIndex,columnIndex,row.propertyType,row.propertyValue)
      if (columnIndex === 1) {  
        if (this.spanArr[rowIndex]>0) {
          return {
            rowspan: this.spanArr[rowIndex],
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
        /** 列表数据合并行处理 */
    rowSpanDataProcess(){
      //先排序，然后做合并处理
      this.form.mmMaterialPropertiesList.sort(function(a,b){
        return b.propertyType-a.propertyType
      })

      //循环数组，在相同元素组的第一个元素下标中记录需要合并的行数，后面都记录0
      let startIndex
      let spanArr=[]
      this.form.mmMaterialPropertiesList.forEach((i,index)=>{
        if(index==0){
          spanArr.push(1)
          startIndex=index
        }else{
          if(i.propertyType == this.form.mmMaterialPropertiesList[index-1].propertyType){
            spanArr[startIndex] += 1
            spanArr.push(0)
          }else{
            startIndex = index
            spanArr.push(1)
          }
        }
      })
      this.spanArr=spanArr
    },
        // 表单重置
    reset() {
      this.form = {
        matId: null,
        matName: null,
        matNo: null,
        remark: null,
        status: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        cjson: null,
        vjson: null,
        matType: null,
        mmMaterialPropertiesList:[]
      };
      // this.form.mmMaterialPropertiesList = [];
      this.resetForm("form");
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 50%;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

p {
    margin-top: 5px;
    margin-bottom: 10px;
}
</style>

<style scoped>
.aa>>>.el-form-item__content{
  margin-left: 0px !important;
}
.aa>>>.el-form-item{
  margin-bottom:1px !important;
}

</style>

